import React, { Component } from "react";
import { Route, Link } from "react-router-dom";
import Detail from "./Detail/index";
export default class Message extends Component {
  state = {
    list: [
      { id: "01", title: "message001" },
      { id: "02", title: "message002" },
      { id: "03", title: "message003" },
    ],
  };
  render() {
    const { list } = this.state;
    return (
      <div>
        <ul>
          {list.map((item) => {
            return (
              <li key={item.id}>
                {/* <Link
                  to={`/home/message/detail?id=${item.id}&title=${item.title}`}
                >
                  {item.title}
                </Link> */}
                <Link
                  to={{
                    pathname: "/home/message/detail",
                    state: { id: item.id, title: item.title },
                  }}
                >
                  {item.title}
                </Link>
                &nbsp;&nbsp;
              </li>
            );
          })}
        </ul>

        {/* <Route path="/home/message/detail/:id" component={Detail} /> */}
        {/* <Route path="/home/message/detail" component={Detail} /> */}
        <Route path="/home/message/detail" component={Detail} />
      </div>
    );
  }
}

